<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="keywords" content="" />
    <!-- 关键字 -->
    <meta name="description" content="" />
    <!-- 描述 -->
    <!-- 引入css -->
    <link rel="stylesheet" href="./css/ionic-change.css">
    <link rel="stylesheet" href="./css/store.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/month.css">
    <title>选择车型</title>
  </head>

  <body style="background: #F2F2F2;">
    <div class="container">
      <div class="malllhead_box borbottom">
        <div class="swiper-container swiper1">
          <div class="swiper-wrapper swiper-swiper1">
            <div class="swiper-slide on">
              <div class="status " data-statue="">全部</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="0">经济型</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="1">商务型</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="2">豪华型</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="3">6-15座商务</div>
            </div>
          </div>
        </div>
      </div>
      <div class="Daily_System">
        <ul class="Daily_System_page">
          <li>
            <div class="daily--item">
              <div class="car_img">
                <img src="./images/car01.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW 4系敞篷轿跑车</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price_con">
                  <div class="price">
                    <em>￥800</em>/日均
                  </div>
                  <div class="zj">
                    <span>每日租金</span>
                    <img src="./images/jt.png" alt="" class="jt">
                  </div>
                </div>
              </div>
            </div>
            <div class="Price_date account-box">
              <div class="f-rili-table">
                <div class="f-rili-head celarfix">
                  <div class="f-rili-th">周日</div>
                  <div class="f-rili-th">周一</div>
                  <div class="f-rili-th">周二</div>
                  <div class="f-rili-th">周三</div>
                  <div class="f-rili-th">周四</div>
                  <div class="f-rili-th">周五</div>
                  <div class="f-rili-th">周六</div>
                  <div class="clear"></div>
                </div>
                <div class="f-tbody clearfix">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="daily--item">
              <div class="car_img">
                <img src="./images/car02.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW 4系敞篷轿跑车</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price_con">
                  <div class="price">
                    <em>￥800</em>/日均
                  </div>
                  <div class="zj">
                    <span>每日租金</span>
                    <img src="./images/jt.png" alt="" class="jt">
                  </div>
                </div>
              </div>
            </div>
            <div class="Price_date account-box">
              <div class="f-rili-table">
                <div class="f-rili-head celarfix">
                  <div class="f-rili-th">周日</div>
                  <div class="f-rili-th">周一</div>
                  <div class="f-rili-th">周二</div>
                  <div class="f-rili-th">周三</div>
                  <div class="f-rili-th">周四</div>
                  <div class="f-rili-th">周五</div>
                  <div class="f-rili-th">周六</div>
                  <div class="clear"></div>
                </div>
                <div class="f-tbody clearfix">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="daily--item">
              <div class="car_img">
                <img src="./images/car03.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW 4系敞篷轿跑车</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price_con">
                  <div class="price">
                    <em>￥800</em>/日均
                  </div>
                  <div class="zj">
                    <span>每日租金</span>
                    <img src="./images/jt.png" alt="" class="jt">
                  </div>
                </div>
              </div>
            </div>
            <div class="Price_date account-box">
              <div class="f-rili-table">
                <div class="f-rili-head celarfix">
                  <div class="f-rili-th">周日</div>
                  <div class="f-rili-th">周一</div>
                  <div class="f-rili-th">周二</div>
                  <div class="f-rili-th">周三</div>
                  <div class="f-rili-th">周四</div>
                  <div class="f-rili-th">周五</div>
                  <div class="f-rili-th">周六</div>
                  <div class="clear"></div>
                </div>
                <div class="f-tbody clearfix">
                </div>
              </div>
            </div>
          </li>
        </ul>
        <ul class="Daily_System_page hide">
          <li>
            <div class="daily--item">
              <div class="car_img">
                <img src="./images/car01.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW Ｘ6</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price_con">
                  <div class="price">
                    <em>￥900</em>/日均
                  </div>
                  <div class="zj">
                    <span>每日租金</span>
                    <img src="./images/jt.png" alt="" class="jt">
                  </div>
                </div>
              </div>
            </div>
            <div class="Price_date account-box">
              <div class="f-rili-table">
                <div class="f-rili-head celarfix">
                  <div class="f-rili-th">周日</div>
                  <div class="f-rili-th">周一</div>
                  <div class="f-rili-th">周二</div>
                  <div class="f-rili-th">周三</div>
                  <div class="f-rili-th">周四</div>
                  <div class="f-rili-th">周五</div>
                  <div class="f-rili-th">周六</div>
                  <div class="clear"></div>
                </div>
                <div class="f-tbody clearfix">
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="sort_price">
        </div>
      </div>
      <div class="footer">
        <img src="./images/foot.png" alt="">
      </div>
    </div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/rem.js"></script>
  <script src="./js/swiper.min.js"></script>
  <script>
    var swiper1 = new Swiper('.swiper1', {
      slidesPerView: 4.5,
      paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      spaceBetween: 10, //slide之间的距离（单位px）。
      freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
      loop: false //是否可循环
    });
    //tab
    $(".swiper-swiper1 .swiper-slide ").on("click ", function () {
      $(".swiper-wrapper .swiper-slide").removeClass("on");
      $(this).addClass("on ");
      var index = $(this).index();
      console.log(index)
      $(".Daily_System ").children(".Daily_System_page").hide();
      $(".Daily_System ").children(".Daily_System_page").eq(index).show();
    });
    $('.daily--item').click(function (event) {
      location.href = "Confirm_order.html"
    })
    $('.Daily_System_page li .car_info .zj').each(function (index, item) {
      $(item).on('click', function (event) {
        event.stopPropagation();
        $(this).parent().find('.zj img.jt').toggleClass("active");
        $(this).parent().parent().parent().parent().find('.account-box').toggleClass('active')
      })
    })
    // 价格排序
    $('.sort_price').click(function () {
      $(this).toggleClass("active");
    })
    //年月
    $(function () {
      //页面加载初始化年月
      var mydate = new Date();
      $(".f-year").html(mydate.getFullYear());
      $(".f-month").html(mydate.getMonth() + 1);
      showDate(mydate.getFullYear(), mydate.getMonth() + 1);
      //日历上一月
      $(".f-btn-jian ").click(function () {
        $(".f-btn-jia").removeClass("active");
        $(this).addClass("active");
        var yy = parseInt($(".f-year").html());
        var mm = parseInt($(".f-month").html());
        if (mm == 1) { //返回12月
          $(".f-year").html(yy - 1);
          $(".f-month").html(12);
          showDate(yy - 1, 12);
        } else { //上一月
          $(".f-month").html(mm - 1);
          showDate(yy, mm - 1);
        }
      })
      //读取年月写入日历  重点算法!!!!!!!!!!!
      function showDate(yyyy, mm) {
        var dd = new Date(parseInt(yyyy), parseInt(mm), 0); //Wed Mar 31 00:00:00 UTC+0800 2010  
        var daysCount = dd.getDate(); //本月天数  
        var mystr = ""; //写入代码
        var today = new Date().getDate(); //今天几号  21
        var monthstart = new Date(parseInt(yyyy) + "/" + parseInt(mm) + "/1").getDay() //本月1日周几  
        var lastMonth; //上一月天数
        var nextMounth //下一月天数
        if (parseInt(mm) == 1) {
          lastMonth = new Date(parseInt(yyyy) - 1, parseInt(12), 0).getDate();
        } else {
          lastMonth = new Date(parseInt(yyyy), parseInt(mm) - 1, 0).getDate();
        }
        if (parseInt(mm) == 12) {
          nextMounth = new Date(parseInt(yyyy) + 1, parseInt(1), 0).getDate();
        } else {
          nextMounth = new Date(parseInt(yyyy), parseInt(mm) + 1, 0).getDate();
        }

        //计算上月空格数
        for (j = monthstart; j > 0; j--) {
          mystr += "<div class='f-td f-null f-lastMonth' style='color:#ccc;'>" + (lastMonth - j + 1) + "</div>";
        }

        //本月单元格
        for (i = 0; i < daysCount; i++) {
          //这里为一个单元格，添加内容在此
          mystr += "<div class='f-td f-number' ><p class='f-day'>" + (i + 1) + "</p>" +
            "<p class='f-money'>" + 120 + "</p>" +
            "</div>";
        }

        //下月单元格
        for (k = 0; k < nextMounth; k++) {//表格保持等高6行42个单元格
          mystr += "<div class='f-td f-number f-nextMounth' style='color:#ccc;'><p class='f-day'>" + (k + 1) + "</p>" +
            "<p class='f-money'>" + 120 + "</p>" +
            "</div>";
        }

        for (k = 0; k < 70 - (daysCount + nextMounth + monthstart); k++) {
          mystr += "<div class='f-td f-null f-nextMonth' style='color:#ccc;'>" + (k + 1) + "</div>";
        }



        //写入日历
        $(".f-rili-table .f-tbody").html(mystr);
        //给今日加class
        if (mydate.getFullYear() == yyyy) {
          if ((mydate.getMonth() + 1) == mm) {
            var today = mydate.getDate();
            var lastNum = $(".f-lastMonth").length;
            $(".f-rili-table .f-td").eq(today + lastNum - 1).addClass("f-today");
          }
        }
        //绑定选择方法
        $(".f-rili-table .f-number").off("click");
        $(".f-rili-table .f-number").on("click", function () {
          $(".f-rili-table .f-number").removeClass("f-on");
          $(this).addClass("f-on");
          $(".f-rili-table .f-number").children().removeClass("f-on");
          $(this).children().addClass("f-on");
        });
      }

      /**
       * 处理默认选中日期效果
       */
      var $allData = $('.f-rili-table');
      var startTime = sessionStorage.getItem('starttime').replace(sessionStorage.getItem('starttime').slice(11), '00:00')
      var endTime = sessionStorage.getItem('endTime').replace(sessionStorage.getItem('endTime').slice(11), '00:00')

      //计算相差天数
      function differData(startTime, endTime) {
        var start = new Date(startTime.replace(/-/g, "/"));
        var end = new Date(endTime.replace(/-/g, "/"));
        var dateDiff = end.getTime() - start.getTime();
        return dateDiff / (1000 * 60 * 60 * 24)
      }


      // 判断依据
      var sessionstartdata = parseInt(startTime.replace(/-/g, '').slice(0, 8));
      var sessionenddata = parseInt(sessionstartdata + differData(startTime, endTime))


      function addKey() {
        var monthstart = parseInt(startTime.replace(/-/g, '').slice(0, 6) + '00');  //从每月第一天开始标识
        for (var j = 0; j < $('.Daily_System_page li').length; j++) {
          for (var i = 0; i < 70; i++) {
            $($allData[j]).find('.f-number').eq(i).attr('key', monthstart + (i + 1))
          }
        }
      } addKey()


      function selectType() {
        var dateBegin = new Date(startTime.replace(/-/g, "/"));
        var dateEnd = new Date(endTime.replace(/-/g, "/"));
        var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数

        if (dateDiff >= 60 * 24 * 60 * 60 * 1000) { //超一个月需要处理的逻辑放在这里
          // alert('超了一个月')
        } else {
          $allData.find('.f-number').map(function (a, b) {
            var key = $(b).attr('key');
            if (key >= sessionstartdata && key <= sessionenddata) {
              $(b).addClass("f-on");
            }
          })
        }
      } selectType()

    })

  </script>

</html>